<template>
  <div class="page">
    <div class="weui-uploader__bd">
        <div class="weui-uploader__input-box" v-if='!disabled'>
            <div class="weui-uploader__input" @click="chooseImage" ></div>
        </div>
      <div class="weui-uploader__files" id="uploaderFiles">

        <block v-for="(item,index) in data" :key="index">
          <div class="weui-uploader__file" :id="item">
            <image class="weui-uploader__img" :src="item" mode="aspectFill" @click="predivImage" :id="item" />

            <!-- 显示xx按钮是否显示  v-if="data.length>0?true:false"  好像写反了 -->
            <i class="iconfont .icon-shanchu"  v-if='!disabled'  @click='delete_image(index)'></i>
            <!-- <div class="weui-progress">
              <div class="weui-progress__bar">
                <progress :percent="Progress[index]" stroke-width="3" />
              </div>

            </div> -->
          </div>
        </block>
      </div>
    </div>

  </div>

</template>

<script>
 import { mapActions } from 'vuex';
  export default {
    data() {
            return { files: [],Progress:[], key: '', }
    },
    methods: {
      ...mapActions(['set_qn_token']),
      chooseImage(e) {
        var _this = this;
        wx.chooseImage({
            count:'20',
          success: function (res) {
            

            _this.files = _this.files.concat(res.tempFilePaths) // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片

            res.tempFilePaths.map((path, index) => {
              _this.data.push(path);     //这步最重要，将图片push进数组，   concat不能改变原有数组 ；

              wx.uploadFile({ //上传图片到服务器
                url: "https://upload.qbox.me",
                filePath: path, //filePath接受真实string路径，只能写个循环了
                name: 'file',
                formData: {
                  token: _this.$store.state.user.qn_token
                },
                success: (res) => {
                   
                },
                fail: (err) => {
                   wx.showToast({
                        title: '上传失败，请检查网络',
                        icon: 'none',
                        duration: 3000,
                        mask: true
                    });

                   console.log(err)  
                }
              }).onProgressUpdate((res) => { //上传进度
                     console.log(res.progress)
                    _this.Progress.push(res.progress) ;      //上传进度
                    //  console.log( _this.Progress.length)
              })

            })


          },
          fail: function () {
            console.log('fail');
          },
          complete: function () {
            console.log('commplete');
          }
        })
      },
      predivImage(e) {
        let _this = this ;
        wx.previewImage({
          current: e.currentTarget.id, // 当前显示图片的http链接
          urls:_this.data // 需要预览的图片http链接列表
        })
      },
      up_image() { //上传图片到服务器
        this.$https.get('adminApi/token/qiniu/get_qiniu_token').then(res => {
            this.set_qn_token(res.data.uptoken);
        })
      },
      delete_image(index) {
        this.data.splice(index, 1)
         console.log(this.data)
      },
      fanhui(){
        wx.navigateBack(1)
      }

    },
    computed:{
      delete_code(){      //删除按钮是否显示  取决于后台返回的状态码
        // return this.data.length>0?false:true ;
      }
    },
    mounted() {
      //  this.up_image();
    },
    onHide(){
    },
    onUnload(){     //页面卸载后，将所有数据清除掉
        this.data = [];
    },
    props:["data","disabled"]
  }
</script>

<style lang="scss" scoped>
.weui-uploader__input-box{
    width: 100rpx;
      height: 100rpx;
      margin-bottom:0;
}
.weui-uploader__bd{
    padding-left:20rpx;
    }
  .weui-uploader__file {
    position: relative;
    i {
      position: absolute;
      top: -5rpx;
      right: 0rpx;
    }
    image{
      width: 100rpx;
      height: 100rpx;
    }
  }

  .weui-progress {
    position:absolute;
    bottom:0rpx;
    left:0;
    right:0;
    margin:0 auto;
  }
</style>
